﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>学生主页</title>
    <link rel="stylesheet" href="../layui/css/layui.css" />
    <script src="../Scripts/jquery-3.3.1.js"></script>
    <script src="../layui/layui.js"></script>
    <style>
        .layui-tab-item {
            display: none;
        }

        .layui-show {
            display: block;
        }

        .layui-tab-title li {
            color: black;
            background-color: #fff;
            border: 1px solid rgb(230, 231, 235);
            height: 24px;
            line-height: 26px;
            text-align: center;
            margin-top: 7px;
            margin-left: 2px;
            margin-right: 2px;

        }
        #nav-tree .layui-nav-child  a{
            margin-left: 40px;
        }
        .layui-tab-title .layui-this {
            color: #fff;
            background-color: #42b983;
        }
       
        /* 折叠图标 */
        #layui-nav-fold:hover {
            background:rgba(0,0,0,.025);
        }
    </style>
</head>

<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-side layui-side-menu">
            <!--带滚动条垂直导航-->
            <div class="layui-side-scroll layui-bg-black">

                <ul class="layui-nav layui-nav-tree" id="nav-tree" lay-filter="navtree">
                    <li class="layui-nav-item">
                        <a href="javascript:;" title="设置"><i
                                class="layui-icon icon-exam-logo"></i><span>在线考试系统</span></a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;" title="设置"><i class="layui-icon layui-icon-console"></i><span>控制台</span></a>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;" title="在线考试"><i
                                class="layui-icon icon-exam"></i><span>在线考试</span></a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;" lay-href="./onlineExam.html">在线考试</a></dd>
                        </dl>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;" lay-href="./myScore.html">我的成绩</a></dd>
                        </dl>
                    </li>
                    
                    <li class="layui-nav-item" style="display: none;">
                        <a href="javascript:;"  title="个人资料"><i
                                class="layui-icon layui-icon-set"></i><span>个人资料</span></a>
                        <dl class="layui-nav-child"  >
                            <dd ><a  id="changeInfoItem" href="javascript:;" lay-href="./changeStudentInfo.html">个人资料</a></dd>
                        </dl>
                    </li>

                    <li class="layui-nav-item" style="display: none;">
                        <a href="javascript:;" title="我"><i
                                class="layui-icon layui-icon-set"></i><span>我</span></a>
                        <dl class="layui-nav-child"  >
                            <dd ><a  id="changePwdItem" href="javascript:;" lay-href="./changePwd.html">修改密码</a></dd>
                        </dl>
                        <dl class="layui-nav-child">
                            <dd ><a href="javascript:;" lay-href="../test.html">退出登录</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>

        <div class="layui-body" style="bottom: 1px">
            <div class="layui-header">
                <div class="layui-nav layui-layout-left">
                    <div class="layui-logo layui-nav-fold" id="layui-nav-fold"><i
                            class="layui-icon layui-icon-shrink-right" aria-hidden="true"></i></div>
                    <span class="layui-breadcrumb" lay-separator="/"
                        style="line-height: 50px;text-align:center;margin-left: 50px;">
                        <a href="javascript:;">首页</a>
                    </span>
                </div>
                <ul class="layui-nav layui-layout-right">
                    <li class="layui-nav-item" id="changeInfo">
                        <a href="javascript:;" style="color:#909399;">个人中心<span class="layui-badge-dot"></span></a>
                    </li>
                    <li class="layui-nav-item" >
                        <a href="javascript:;" style="color:#909399;">
                            <img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
                        <dl class="layui-nav-child" style="height: 72px;">
                            <dd  ><a id="changePwd" href="javascript:;">修改密码</a></dd>
                            <dd id="exit"><a href="javascript:;">退出登录</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
            <div class="layui-tab" lay-filter="pagetabs" lay-allowclose="true" style="margin:0 0;">
                <ul class="layui-tab-title">
                    <li class="layui-this" lay-id="11">主页</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <iframe src="" style="width: 100%;height: 100%" class="layui-admin-iframe" scrolling="no"
                            frameborder="0"></iframe>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $(function ()
            {
                //模拟点击事件
                $("#changeInfo").click(function () //修改用户
                {
                    $("#changeInfoItem").click(); //对应左侧导航栏
                })

                //changePwdItem
                $("#changePwd").click(function () //修改密码
                {
                    $("#changePwdItem").click(); //对应左侧导航栏
                })
            });
            
        </script>
        <script>
            layui.use(['element', 'layer'], function () {
                var element = layui.element
                    , layer = layui.layer
                    , $ = layui.jquery;

                $("#exit").click(function ()
                {
                    layer.confirm('确定好退出吗！！！', {
                        btn: ['确定', '取消'] //可以无限个按钮
                                  , btn2: function (index, layero)
                                  {
                                      //按钮【按钮二】的回调
                                      return true;
                                  }
                    }, function (index)
                    {
                        //按钮【按钮一】的回调
                        layer.close(index);
                        setTimeout("window.close();window.open('../index.html', '_blank');", "10");

                    });

                })
                //左侧垂直菜单监控
                element.on('nav(navtree)', function (elem) {

                    if ($(this).attr("lay-href") != undefined) {
                        var flag = true;
                        //url
                        var url = $(this).attr("lay-href");
                        //判断选项卡中是否存在已打开的页面，如果有直接切换到打开页面
                        $(".layui-tab-title li").each(function (i, e) {
                            if ($(this).attr("lay-id") == url) {
                                //切换选项卡
                                element.tabChange('pagetabs', url);
                                flag = false;
                                changeConsole();//修改控制路径
                            }
                            //tab做了操作就更新tab的高度
                            var h = window.screen.height;
                            $(".layui-show").css("height", h);
                        })
                        if (flag) {
                            //新增选项卡
                            element.tabAdd('pagetabs', {
                                title: elem[0].innerText
                                , content: '<iframe src="' + url + '" class="layui-admin-iframe" scrolling="auto" frameborder="0" style="width: 100%;height: 100%"></iframe>'
                                , id: url
                            });
                            //切换选项卡
                            element.tabChange('pagetabs', url);
                            element.render('tab');
                            //tab做了操作就更新tab的高度
                            var h = window.screen.height;
                            $(".layui-show").css("height", h);
                            changeConsole();//修改控制路径
                        }
                    }

                    function changeConsole() {
                        //修改控制路径
                        var b1 = elem.parent().parent().siblings('a')[0].innerText;
                        var b2 = elem[0].innerText;
                        $('.layui-breadcrumb').empty();
                        var str = '<a href="">首页</a>' + '<a href="javascript:;">' + b1 + '</a>' + '<a href="javascript:;">' + b2 + '</a>';
                        $('.layui-breadcrumb').append(str);
                        element.render('breadcrumb');
                    }

                });
                //点击选项卡修改控制台路径
                $(document).on("click", ".layui-tab-title li", function () {
                    var a = $(this).attr('lay-id');
                    change(a);
                });
                //选项卡关闭修改控制台路径
                $(document).on("click", ".layui-tab-close", function () {
                    var a = $('.layui-tab-title .layui-this ').attr('lay-id');
                    change(a);
                });
                
                function change(a){//修改控制台函数
                var b = $("a[lay-href='" + a + "']");
                    $('.layui-breadcrumb').empty();//清空控制台
                    if (b.length == 0) {
                        $('.layui-breadcrumb').append('<a href="">首页</a>');
                        element.render('breadcrumb');
                    }
                    else {
                        var b1 = b.parent().parent().siblings('a')[0].innerText;
                        var b2 = b[0].innerText;
                        var str = '<a href="">首页</a>' + '<a href="javascript:;">' + b1 + '</a>' + '<a href="javascript:;">' + b2 + '</a>';
                        $('.layui-breadcrumb').append(str);
                        element.render('breadcrumb');
                    }
            }
            });
            
        </script>
        <script>

            //折叠左菜单栏
            var isShow = true;  //定义一个标志位
            $('#layui-nav-fold').click(function () {
                //选择出所有的span，并判断是不是hidden
                $('.layui-nav-item span').each(function () {
                    if ($(this).is(':hidden')) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
                //判断isshow的状态
                if (isShow) {
                    $('.layui-side-scroll').animate({ width: "60px" });//设置宽度
                    $('.layui-side').animate({ width: "60px" }); //设置宽度
                    //将footer和body的宽度修改
                    $('.layui-body').animate({ left: "60px" });
                    $('.layui-footer').animate({ left: "60px" });
                    //将二级导航栏隐藏
                    $('dd a').each(function () {
                        $(this).hide();
                    });
                    //修改折叠图标
                    $('.layui-nav-fold i').removeClass('layui-icon-shrink-right').addClass('layui-icon-spread-left');
                    //修改标志位
                    isShow = false;
                } else {
                    $('.layui-side-scroll').animate({ width: "200px" }); //设置宽度
                    $('.layui-side').animate({ width: "200px" }); //设置宽度
                    $('.layui-body').animate({ left: "200px" });
                    $('.layui-footer').animate({ left: "200px" });
                    $('dd a').each(function () {
                        $(this).show();
                    });
                    //修改折叠图标
                    $('.layui-nav-fold i').removeClass('layui-icon-spread-left ').addClass('layui-icon-shrink-right');
                    isShow = true;
                }
            });
        </script>
</body>

</html>